<template>
	<view>
		<view class="container">
			<!-- 当前判断长度只为简单判断类型，实际业务中，根据逻辑直接渲染即可 -->
			<image class="pic" v-bind:src="book.picUrl" mode="aspectFill" onerror="this.src='/static/no-cover.png'">
			</image>
			<view>{{book.authorName}}</view>
			<view>作品</view>
			<view>字数{{book.wordCount}} 评论{{book.commentCount}}</view>
		</view>
		<view class="content_container">
			<h4>最后更新<text class="more" @click="gotoIndex(book.id,book.bookName)">更多目录</text></h4>
			<text>{{book.lastIndexName}} </text>
			<h4>内容介绍</h4>
			<view className="article_content" v-html="book.bookDesc"></view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				book: {}
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			 //打印出上个页面传递的参数。
			this.$myRequist({
				url: '/book/queryBookDetail/' + option.bookid
			}).then(res => {
				console.log(res.data);
				this.book = res.data.data;
				uni.setNavigationBarTitle({
					title: res.data.data.bookName
				})
			})
		},
		methods: {
			gotoIndex(id,name) {
				uni.navigateTo({
					url: '/pages/book/bookIndex/bookIndex?bookid=' + id+'&bookname='+name
				});
			}
		}
	}
</script>

<style>
	.container {
		text-align: center;
		padding: 5px;
	}

	.container>* {
		margin: 5px;
	}

	.pic {
		width: 50px;
		height: 75px;
	}

	.more {
		margin-left: 20px;
	}

	.content_container>* {
		margin: 5px;
		padding: 5px;
	}

	.article_content {
		color: white;
		WORD-WRAP: break-word;
		TABLE-LAYOUT: fixed;
		word-break: break-all;
	}
</style>
